import React from "react";
// 引入长列表
import { List, AutoSizer } from "react-virtualized";
// 导入UI组件
import { Toast } from "antd-mobile";
// 导入axios
// import axios from "axios";
import './index.scss'
import styles from './index.module.css'
// 导入utile的当前城市的地位方法
// import { getCuiientCity } from '../../utils'
// 数据格式化方法
// const fromatCityData = (list) => {
//     const cityList = {}

//     list.forEach(item => {
//         const first = item.short.substr(0, 1)
//         if (cityList[first]) {
//             cityList.push(item)
//         } else {
//             cityList[first] = [item]
//         }
//     });
// // 1遍历数组
// // 获取没一个城市的首字母
// // 2判断citylist中是否又该分类
// // 3如果有就往该分类中push数据
// // 如果没有就先创建一个数组,然后把当前城市信息添加到数组中

// // 获取索引数据
// const cityIndex = Object.keys(cityList).sort()//sort排序

// return {
//     cityList,
//     cityIndex
// }
// }
// const list = Array(100).fill('react-virtualized')


// 封装母索引的方法
const formmatCityIndex = (letter) => {
    switch (letter) {
        case '#':
            return '当前定位'
        case 'hot':
            return '热门城市'
        default:
            return letter.toUpperCase()

    }
}


export default class CityList extends React.Component {
    constructor(props) {
        super(props)
        // 创建ref对象
        this.cityListComponent = React.createRef()
    }

    state = {
        cityList: {},
        cityIndex: ['#', 'hot', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'q', 's', 't', 'w', 'x', 'y', 'z'],
        acitiveIndex: 0
    }
    // 切换城市的方法
    changeCity = () => {
        // this.props.history.replace('/home')
        Toast.fail('Load failed !!!', 1, null, false);

        // 提示用户
    }
    // 长列表的方法
    rowRenderer = ({ key, index, isScrolling, isVisible, style }) => {
        const { cityIndex } = this.state
        const letter = cityIndex[index]
        return (
            <div key={key} style={style} className='city'>
                <div className="title">{formmatCityIndex(letter)}</div>
                {/* {cityList[letter].map(item=><div className='name' key={item.value}>{item.lable}</div>)} */}
                <div className="name" onClick={this.changeCity()}>
                    上海
                </div>
            </div>
        )
    }

    componentDidMount() {
        // 计算每一行的列表高度
        this.cityListComponent.current.measureAllRows()
    }
    // 封装渲染右侧索引列表的方法
    renderCityIndex = () => {
        return this.state.cityIndex.map((item, index) => <li className={this.state.acitiveIndex === index ? "" : 'city-index-item'
        } key={item} onClick={() => { this.cityListComponent.current.scrollToRow(index) }}>
            <span className="index-active">{item === 'hot' ? '热' : item.toUpperCase()}</span>
        </li>)
    }
    // 获取城市列表的方法
    // async getCity() {
    //     const res = await axios.get('http://locationhost:8080/area/city?level=1')
    //     console.log(res)
    //     const { cityList, cityIndex } = fromatCityData(res.data.body)

    //     /*1获取热门城市数据
    //        2将数据添加到citylist中
    //        3将索引添加到cityindex中        
    //     */
    //     const hotRes = await axios.get('http://locationhost:8080/area/hot')
    //     console.log('当前热门城市', hotRes)
    //     // 将索引添加到citylist
    //     cityList['hot'] = hotRes.data.body
    //     // 将索引添加到cityindex中
    //     cityIndex.unshift('hot')
    //     // 获取当前定位方法
    //     const curCity = await getCuiientCity()
    //     // 添加当前定位到数据中
    //     cityList['#']=[curCity]
    //     cityIndex.unshift('#')
    //     console.log(cityList, cityIndex, curCity)
    //         this.setState({
    // cityList:cityList,
    // cityIndex:cityIndex
    // })
    // }
    render() {
        const { cityIndex } = this.state
        return (
            <div className="cityList">
                <div className={styles.title}>测试文件</div>
                <div className="navbar">
                    <div className="left" onClick={() => { this.props.history.go(-1) }}><i className="iconfont icon-cangku"></i></div><div className="con">城市选择</div><div className="right"></div>
                </div>
                {/* 长列表 */}
                <AutoSizer>
                    {/* 动态创建高度的方法
                    getHight = (index)=>{
                        console log (index)  索引标题高+城市数量*城市的数量
                        const {cityList,cityIndex} = this.state
                        return 36+cityList[cityIndex[index]].length*50
                    }
                    */}
                    {({ width, height }) =>
                        <List ref={this.cityListComponent}
                            width={width}
                            height={height}
                            rowCount={cityIndex.length}
                            rowHeight={100}
                            rowRenderer={this.rowRenderer}
                            scrollToAlignment='start'
                        />

                    }
                </AutoSizer>
                <ul className="city-index">
                    {this.renderCityIndex()}
                </ul>
            </div>
        )
    }
}